<template>
	<view class="content">
		<view v-if="userinfo" class="content" style="    background: rgb(102, 175, 253);">
			<view class="geren">
				个人中心
			</view>
			<view
				style="    background: rgb(102, 175, 253); width: 750rpx;display: flex;justify-content: space-between;margin-top: 16rpx;">
				<view class="">

					<view style="display: flex;align-items: center;margin-left: 24rpx;">
						<image :src="userinfo.avatar" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;">
						</image>
						<!-- <u-avatar :src="userinfo.avatar" size="90"></u-avatar> -->
						<view style="display: flex;flex-direction: column;margin-left: 12rpx;">
							<text style="color: #fffee2;font-weight: 500;font-size: 34rpx;">{{userinfo.nickname}}</text>
							<!-- <text style="color: #fff;font-size: 25rpx;">{{$u.timeFormat(userinfo.time, 'yyyy-mm-dd')}}</text> -->
						</view>
					</view>
				</view>
				<view style="display: flex;margin-top: 12rpx;">
					<!-- <u-tag text="加油送积分" shape="circleLeft" bgColor="#090909" color="#c1c1c1" font-size="34" borderColor="#090909"></u-tag> -->
				</view>
			</view>
			<view style="display: flex;margin-top: 46rpx;color: white;text-align: left;width: 750rpx;">
				<text style="margin-left: 24rpx;">会员积分</text>
			</view>
			<view style="display: flex;margin-top: 3rpx;color: white; justify-content: space-between ;width: 750rpx;">
				<text
					style="margin-left: 24rpx;color: #f5be9e;font-size: 60rpx;font-weight: bold;">{{userinfo.integral}}</text>
				<view style="margin-right: 30rpx;">
					<!-- <u-button @click="goyuangong" type="warning" size="mini" :customStyle="{background:'linear-gradient(to right,#eddbdc,#d1a58c)',color:'#634e42'}">员工入口</u-button> -->
				</view>
			</view>
			<view style="width: 700rpx;margin: 8rpx auto;height: 6rpx;background: #f5be9e;border-radius: 3rpx;"></view>
			<view style="width: 700rpx;margin: 8rpx auto;color: #606266;">
				积分可兑换礼品，平台会不定期更新礼品
			</view>
			<view style="width: 600rpx;display: flex;margin: auto;margin-top: 32rpx;">
				<view @click="jifenxun(0)" :class="indexc==0?'bkbkc':'bkbk'" style="border-top-left-radius: 20rpx;">
					<!-- <u-icon name="calendar-fill" label="积分记录"></u-icon> -->
					<text class="cuIcon-moneybag">礼品兑换</text>
				</view>
				<view @click="jifenxun(1)" :class="indexc==1?'bkbkc':'bkbk'" class="bkbk"
					style="border-top-right-radius: 20rpx;">
					<!-- <u-icon name="file-text-fill" label="礼品兑换"></u-icon> -->
					<text class=" cuIcon-exit">积分记录</text>
				</view>
			</view>
		</view>



		<view v-if="indexc==1" style="width: 700rpx;display: flex;margin: 24rpx auto;flex-direction: column;">
			<view v-if="list0.length>0">
				<view v-for="(u,index) in list0" :key="index"
					style="width: 660rpx;display: flex;justify-content: space-between;margin: 12rpx auto;padding-bottom: 16rpx;border-bottom: 6rpx solid #f1f1f1;">
					<view style="display: flex;flex-direction: column;">
						<text style="font-size: 28rpx;">{{u.remarks}}</text>
						<text style="font-weight: 25rpx;color: #606266;margin-top: 4rpx;">{{u.addtime}}</text>
					</view>
					<view style="font-size: 36rpx;">
						<text style="color: #FA3534;" v-if="u.state==2">- {{u.integral}}</text>
						<text style="color: #00aa7f;" v-if="u.state==1">+ {{u.integral}}</text>
					</view>
				</view>
			</view>

			<view v-else style="margin: 120rpx auto;">
				<!-- <u-empty text="无积分记录" mode="list"></u-empty> -->
			</view>

		</view>
		<view v-if="indexc==0"
			style="width: 700rpx;display: flex;margin: 24rpx auto;flex-direction: column;    padding-bottom: 180rpx;">
			<view v-if="list1.length>0">
				<view v-for="(u,index) in list1" :key="index" @click="godown(u)"
					style="width: 660rpx;display: flex;margin: 12rpx auto;padding-bottom: 16rpx;border-bottom: 6rpx solid #f1f1f1;justify-content: space-between;">
					<view style="display: flex;">
						<view style="display: flex;flex-direction: column;">
							<image :src="u.list.image" style="width: 160rpx;height: 120rpx;border-radius: 8rpx;"
								mode="">
							</image>
						</view>
						<view
							style="display: flex;flex-direction: column;margin-left: 12rpx;height: 120rpx;justify-content: space-between;">
							<view style="color: #2b2b2b;" class="u-line-2">
								{{u.list.title}}
							</view>
							<view style="color: #FCBD71;">
								{{u.integral}}积分
							</view>
						</view>
					</view>
					<view class="">
						<text class="" v-if="u.state==1"
							style="background: #66affd; padding: 10rpx;color: white;border-radius: 6rpx;">去下载</text>
						<!-- <u-tag type="primary" size="mini" text="处理中" v-if="u.zt==0"></u-tag> -->
					</view>
				</view>
			</view>
			<view v-else style="margin: 120rpx auto;">
				<!-- <u-empty text="还没有兑换记录" mode="history"></u-empty> -->
			</view>
		</view>
		<jifen-footer flg="个人中心"></jifen-footer>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				src: '',
				indexc: 0,
				userinfo: '',
				list0: [],
				list1: [],
				page: '1',
				total: ''
			}
		},
		onLoad() {

		},
		onShow() {
			this.list0 = []
			this.list1 = []
			var that = this
			if (uni.getStorageSync('token')) {
				this.getuser()
				this.getlist()
			} else {
				uni.navigateTo({
					url: '/gc_school/pages/login/login'
				})
			}

		},
		onReachBottom() {
			if (this.indexc == 0) {
				this.page += 1
				this.getlist0()
			} else {
				this.tips.tips('没有更多记录了')
			}

			if (this.indexc == 1 && this.list1.length < this.total) {
				this.page += 1
				this.getlist()

			} else {
				this.tips.tips('没有更多记录了')
			}

		},

		methods: {
			jifenxun(e) {
				this.indexc = e
				this.page = 1
				this.list0 = []
				this.list1 = []
				if (e == 0) {
					this.getlist()

				}
				if (e == 1) {
					this.getlist0()
				}
			},
			godown(e) {
				uni.navigateTo({
					url: '/gc_school/pages/jifen/infodown?id=' + e.id
				})
			},
			getuser() {
				var that = this
				app.globalData.util.request({
					url: 'WechatUser/view',
					data: {
						s_id: uni.getStorageSync('schoolId')
					},
					success(res) {
						if (res.data.status == 200) {
							that.userinfo = res.data.data
							console.log(9939, res)
						}

					}
				}, true)
			},
			getlist0: function() {
				var uid = this.userinfo.id
				var that = this
				app.globalData.util.request({
					url: 'Integrallog/list',
					data: {
						page: that.page,
						s_id: uni.getStorageSync('schoolId')
					},
					success(res) {
						if (res.data.status == 200) {
							// that.userinfo = res.data.data
							console.log('xiaofei记录', res)
							that.list0 = res.data.data.data
						}

					}
				}, true)

			},
			getlist: function() {
				var uid = this.userinfo.id
				var that = this
				app.globalData.util.request({
					url: 'Knowledgeorder/myorder',
					data: {
						page: that.page,
						s_id: uni.getStorageSync('schoolId')
					},
					success(res) {
						if (res.data.status == 200) {
							// that.userinfo = res.data.data
							console.log('兑换记录', res)
							that.list1 = [...that.list1, ...res.data.data.data]
							that.total = res.data.data.total
						}

					}
				}, true)

			},
			gologin: function() {
				uni.navigateTo({
					url: '/pages/center/login'
				})
			},
			goyuangong: function() {
				if (this.userinfo.admin == 1) {
					uni.navigateTo({
						url: '/pages/center/yuangong'
					})
				} else {
					uni.showToast({
						title: '您的账号不是员工角色，请联系管理员',
						icon: 'none'
					})
				}
			}
		}
	}
</script>
<style>
	page {}
</style>
<style lang="scss" scoped>
	.bkbk {
		width: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background: rgb(233, 233, 233);
		color: #303133;
	}

	.bkbkc {
		width: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		background: #fff;
		color: #121314;
		font-weight: bold;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		// color: $u-content-color;
	}

	.link-demo {
		margin-top: 80rpx;
	}

	.geren {
		color: #fffee2;
		text-align: left;
		margin-top: 118rpx;
	}
</style>